<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.min.js"></script>
    <script>
        window.onload=function(){
            var student={
                template:`
                    <div>
                        <h2>student-list页面</h2>   
                    </div>
                `
            };
            var user={
                // created(){
                //     alert(this.$route.params.id)
                // },
                template:`
                    <div>
                        <h2>user-list页面</h2>   
                    </div>
                `
            };
            var teacher={
                // created(){
                //     alert(this.$route.query.id)
                // },
                template:`
                    <div>
                        <h2>teacher-list页面</h2>   
                    </div>
                `
            };
            var router=new VueRouter({
                     routes:[{
                        path:'/student',
                        component:student
                    },{
                        path:'/teacher',
                        name:'teacher',
                        component:teacher 
                    },{
                        path:'/user',
                        component:user,
                        name:'user'
                    }]
            });
            new Vue({
                el:'#app',
                router,
                methods:{
                    handler(){
                        this.$router.push('/student');
                        console.log(history.length)
                    },
                    handler1(){
                        this.$router.push({path:'/teacher',query:{id:10}});
                    },
                    handler2(){
                        this.$router.replace({name:'user',params:{id:20}});
                    },
                    back(){
                        this.$router.back()
                    },
                    forward(){
                        this.$router.forward()
                    },
                    go(){
                        this.$router.go(-1)
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <h1>编程路由</h1>
        <button @click='handler'>student</button>
        <button  @click='handler1'>teacher</button>
        <button  @click='handler2'>user</button>
        <br>
        <button @click='back'>back</button>
        <button @click='forward'>forward</button>
        <button @click='go'>go</button>
        <div id="content">
            <router-view></router-view>
        </div>
    </daiv>
</body>
</html>